<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        body{
            height:100%;
            text-align: center;
        }
        #canvas{
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="1024" height="580">
    您当前的浏览器尚不支持canvas
</canvas>
</body>
<script src="js/digit.js"></script>
<script>
    var cliWidth=1024;
    var cliHeight=500;
    //半径
    var radius=8;
    var marginTop=60;
    var marginLeft=30;
//    //设置结束时间:设置一个小时后
//    var endTime=new Date();
//    endTime.setTime(endTime.getTime()+3600*1000);
    //剩余时间
    var leftTime=0;
    //小球
    var ball=[];
    var colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
    window.onload=function(){
        //自适应
        cliWidth=document.body.clientWidth;
        cliHeight=document.body.clientHeight;
        marginLeft=Math.round(cliWidth/10);
        radius=Math.round(cliWidth*4/5/108)-1;
        marginTop=Math.round(cliHeight/5);

        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        canvas.width=cliWidth;
        canvas.height=cliHeight;
        leftTime=fnLeftTime();
        setInterval(function(){
            fnRander(context);
            upDate();
        },50);
    };
    //剩余时间计算
    function fnLeftTime(){
        var nowTime=new Date();
//        var lfTime=endTime.getTime()-nowTime.getTime();
//        lfTime=Math.round(lfTime/1000);
//        return lfTime>=0?lfTime:0;
        var lfTime=nowTime.getHours() * 3600 + nowTime.getMinutes() * 60 + nowTime.getSeconds();
        return lfTime;
    }
    //绘制画布
    function fnRander(context){
        context.clearRect(0,0,cliWidth,cliHeight);
        //小时
        var hours=parseInt(leftTime/3600);
        //分钟
        var minutes=parseInt(leftTime/60%60);
        //秒
        var seconds=leftTime%60;
        randerDigit(marginLeft,marginTop,parseInt(hours/10),context);
        randerDigit(marginLeft+15*(radius+1),marginTop,parseInt(hours%10),context);
        randerDigit(marginLeft+30*(radius+1),marginTop,10,context);
        randerDigit(marginLeft+39*(radius+1),marginTop,parseInt(minutes/10),context);
        randerDigit(marginLeft+54*(radius+1),marginTop,parseInt(minutes%10),context);
        randerDigit(marginLeft+69*(radius+1),marginTop,10,context);
        randerDigit(marginLeft+78*(radius+1),marginTop,parseInt(seconds/10),context);
        randerDigit(marginLeft+93*(radius+1),marginTop,parseInt(seconds%10),context);
        for(var i=0;i<ball.length;i++){
            context.fillStyle=ball[i].color;
            context.beginPath();
            context.arc(ball[i].x,ball[i].y,radius,0,0.2*Math.PI,true);
            context.closePath();
            context.fill();
        }
    }
    //修正
    function upDate(){
        var nextTime=fnLeftTime();
        var nextHours=parseInt(nextTime/3600);
        var nextMinutes=parseInt(nextTime/60%60);
        var nextSeconds=nextTime%60;
        var nowHours=parseInt(leftTime/3600);
        var nowMinutes=parseInt(leftTime/60%60);
        var nowSeconds=leftTime%60;
        if(nextSeconds!=nowSeconds){
            if(parseInt(nowHours/10)!=parseInt(nextHours/10)){
                addBalls( marginLeft,marginTop,parseInt(nowHours/10));
            }
            if( parseInt(nowHours%10) != parseInt(nextHours%10) ){
                addBalls( marginLeft+15*(radius+1),marginTop,parseInt(nowHours/10));
            }
            if( parseInt(nowMinutes/10) != parseInt(nextMinutes/10) ){
                addBalls( marginLeft+39*(radius+1),marginTop,parseInt(nowMinutes/10));
            }
            if( parseInt(nowMinutes%10) != parseInt(nextMinutes%10) ){
                addBalls(marginLeft+ 54*(radius+1),marginTop,parseInt(nowMinutes%10));
            }
            if( parseInt(nowSeconds/10) != parseInt(nextSeconds/10) ){
                addBalls(marginLeft+ 78*(radius+1),marginTop,parseInt(nowSeconds/10));
            }
            if( parseInt(nowSeconds%10) != parseInt(nextSeconds%10) ){
                addBalls(marginLeft+ 93*(radius+1),marginTop,parseInt(nextSeconds%10));
            }
            leftTime=nextTime;
        }
        upDateBalls();
    }
    //添加小球
    function addBalls(x,y,num){
        for(var i=0;i<digit[num].length;i++)
            for(var j=0;j<digit[num][i].length;j++)
                if(digit[num][i][j]==1){
                    var aBall={
                        x:x+j*2*(radius+1)+(radius+1),
                        y:y+i*2*(radius+1)+(radius+1),
                        g:1.5+Math.random(),
                        vx:Math.pow( -1,Math.ceil( Math.random()*1000 )) * 4,
                        vy:-5,
                        color: colors[ Math.floor( Math.random()*colors.length)]
                    };
                    ball.push(aBall);
                }
    }
    //
    function upDateBalls(){
        for(var i=0;i<ball.length;i++){
            ball[i].x+=ball[i].vx;
            ball[i].y+=ball[i].vy;
            ball[i].vy+=ball[i].g;
            if(ball[i].y>=cliHeight-radius){
                ball[i].y=cliHeight-radius;
                ball[i].vy=-ball[i].vy*0.75;
            }
        }
        //优化性能
        var cnt=0;
        for(var i=0;i<ball.length;i++)
            if(ball[i].x+radius>0&&ball[i].x-radius<cliWidth)
            ball[cnt++]=ball[i];
        while (ball.length>Math.min(300,cnt)){
            ball.pop();
        }
    }
    //绘制位置
    //参数：开始位置、要绘制的数字、context
    function randerDigit(x,y,num,cont){
        cont.fillStyle="rgb(0,102,153)";
        //二重循环遍历二维点阵
        for(var i=0;i<digit[num].length;i++)
            for(var j=0;j<digit[num][i].length;j++)
                if(digit[num][i][j]==1){
                    //绘制圆球
                    cont.beginPath();
                    //圆球的位置
                    cont.arc(x+j*2*(radius+1)+(radius+1),y+i*2*(radius+1)+(radius+1),radius,0,2*Math.PI);
                    cont.closePath();
                    cont.fill();
                }
    }
</script>
</html>